{% load xBlog_filter %}
<!DOCTYPE HTML>
<html>
<head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <link rel="icon" href="/static/xBlog/img/anchun.jpg" type="image/x-icon">

    <link rel='stylesheet' href="/static/xBlog_admin/css/bootstrap.min.css" type='text/css'/>
    <link rel='stylesheet' href="/static/xBlog_admin/css/style.css" type='text/css'/>
    <link rel='stylesheet' href="/static/xBlog_admin/css/font-awesome.css" type='text/css'/>
    <link rel='stylesheet' href="/static/xBlog/css/animate.css" type='text/css'/>
    <link rel='stylesheet' href="/static/xBlog_admin/css/custom.css" type='text/css'/>
    <link rel='stylesheet' href="/static/xBlog_admin/css/admin-custom.css" type='text/css'/>
    <link rel="stylesheet" href="/static/xBlog_admin/css/clndr.css" type="text/css"/>

    <script src="/static/xBlog_admin/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/xBlog_admin/js/site.js" type="text/javascript"></script>
    <script src="/static/xBlog_admin/js/underscore-min.js" type="text/javascript"></script>
    <script src="/static/xBlog_admin/js/custom.js" type="text/javascript"></script>
    <script src="/static/xBlog_admin/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/static/xBlog/js/js.cookie.js" type="text/javascript"></script>
    <script src="/static/xBlog_admin/epiceditor/js/epiceditor.min.js" type="text/javascript"></script>
    <script src="/static/xBlog_admin/js/application.js" type="text/javascript"></script>
    <script src="/static/xBlog_admin/js/Chart.min.js" type="text/javascript"></script>
    <script src="/static/xBlog_admin/js/metisMenu.min.js" type="text/javascript"></script>
    <script src="/static/xBlog_admin/js/moment-2.2.1.js" type="text/javascript"></script>
    <script src="/static/xBlog_admin/js/clndr.js" type="text/javascript"></script>

</head>
<body>
<div id="wrapper">
    <!-- Navigation -->
    <nav class="top1 navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{% url 'blog_dashboard' %}">xBlog - 鹌鹑</a>
        </div>
        <!-- /.navbar-header -->
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                    <i class="fa fa-comments-o">
                    </i>
                    {% if today_comments %}
                        <span class="badge">
                       {{ today_comments|length }}
                   </span>
                    {% endif %}
                </a>
                <ul class="dropdown-menu" id="comments-reminder">

                    <li class="dropdown-menu-header">
                        <strong>
                            Messages
                        </strong>
                        <div class="progress thin">
                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60"
                                 aria-valuemin="0" aria-valuemax="100"
                                 style="width: {{ today_comments|length_percentage:latest_comments }}">
                       <span class="sr-only">
                           40% Complete (success)
                       </span>
                            </div>
                        </div>
                    </li>
                    {% for comment in latest_comments %}
                        <li class="avatar">
                            <a href="{% url 'detail' article_id=comment.article_id.id %}#{{ comment.comment_id }}"
                               target="_blank">
                                <img src="/static/xBlog_admin/images/{{ head_list|random }}" alt=""/>
                                <div>{{ comment.content|sub_content:12 }}</div>
                                <small>{{ comment.submit_time|date:'Y-m-d H:i:s' }}</small>
                                {% if comment in today_comments %}
                                    <span class="label label-info">NEW</span>
                                {% endif %}
                            </a>
                        </li>
                    {% endfor %}
                    <li class="dropdown-menu-footer text-center">
                        <p>Messages</p>
                    </li>
                </ul>
            </li>
            <script>
                $.each($('#comments-reminder li small'), function (i, item) {
                    item.textContent = moment(item.textContent, 'YYYY-MM-DD HH:mm:ss').fromNow();
                })
            </script>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle avatar" data-toggle="dropdown"><img
                        src="{{ admin.email|gravatar }}"></a>
                <ul class="dropdown-menu">
                    <li class="dropdown-menu-header text-center">
                        <strong>Account</strong>
                    </li>
                    <li class="m_2"><a href="{% url 'logout' %}"><i class="fa fa-lock"></i> Logout</a></li>
                </ul>
            </li>
        </ul>

        <form class="navbar-form navbar-right" action="{% url 'blog_articles' %}">
            <input type="text" class="form-control" name="q" value="Search..." onfocus="this.value = '';"
                   onblur="if (this.value == '') {this.value = 'Search...';}">
        </form>

        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li>
                        <a href="{% url 'blog_dashboard' %}"><i class="fa fa-dashboard fa-fw nav_icon"></i>Dashboard</a>
                    </li>
                    <li>
                        <a href="{% url 'blog_articles' %}"><i class="fa fa-indent fa-fw nav_icon"></i>Articles</a>
                    </li>
                    <li>
                        <a href="/admin/" target="_blank"><i class="fa fa-table fa-fw nav_icon"></i>Database</a>
                    </li>
                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>
    <div class="copyrights">Collect from <a href="http://www.cssmoban.com/">网页模板</a></div>
    <div id="page-wrapper" style="min-height: 518px;">
        {% block content %}
        {% endblock %}
    </div>
</div>
</body>
</html>